<template>
	<view class="login">
		<image src="../../static/pages_login/bg.png" class="bg" mode=""></image>
		<u-icon class="u-m-t-160 u-m-l-40" @click="$back" size="20" style="margin: 60rpx 40rpx;" name='arrow-left'></u-icon>
		<view class="u-m-t-300 u-m-l-30"  style="margin: 200rpx 30rpx;" v-if="register==0">
			<view class="Title">HELLO！</view>
			<view class="Title">欢迎来到{{config.user_name}}！</view>
		</view>
		<view class="LoginForm">
			<view class="u-m-t-50 flex LoginForm_title" v-if="register==0">
				<image src="/static/pages_login/account.png" mode=""></image>
				<text>账号</text>
			</view>
			<view class="inputbox" v-if="register==0">
				<input type="number" placeholder="请输入账户" v-model="mobile" placeholder-class="ppp">
			</view>
			<view class="u-m-t-50 flex LoginForm_title" style="justify-content: space-between;" v-if="register==0">
				<view class="flex" style="align-items: center;">
					<image src="/static/pages_login/pwd.png" mode=""></image>
					<text>密码</text>
				</view>
				<text @click="$goTo('pages_login/forgetpwd/forgetpwd')" style="color: #B4BABE;">忘记密码？</text>
			</view>
			<view class="inputbox" v-if="register==0">
				<input type="password" placeholder="请输入密码" v-model="pwd" placeholder-class="ppp">
			</view>
			<view class="mianbtn" @click="applogin" v-if="register==0">
				登录
			</view>
		</view>
		<view class="flex-cneter register" v-if="register==0">
			<text>还没有账号？</text><text @click="$goTo('pages_login/register/register')">立即注册</text>
		</view>
		<view class="bottom flex-cneter">
			<view class="flex-cneter">
				<image v-if="read==1" @click="read=0" style="width: 30rpx; height: 30rpx;"
					src="../../static/pages_login/read.png" mode=""></image>
				<view class="circle" v-else @click="read=1">

				</view>
				已阅读并同意 <text class="green">《用户协议》</text> 与 <text class="green">《隐私保护政策》</text>
			</view>
		</view>

	</view> 
</template>

<script>
	export default {
		data() {
			return {
				// config: this.$store.state.config,
				pwd: '',
				mobile: '',
				read: 1,
				register: 0,
			};
		},
		onLoad() {
		},
		computed: {
			config() {
				return this.$store.state.config
			}
		},
		methods: {
			//App登录
			applogin() {
				if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
					uni.$u.toast('请输入正确的手机号');
					return;
				}
				this.$api.post('/login', {
					account: this.mobile,
					password: this.pwd
				}).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.userinfo.token);
						uni.$u.toast(res.msg);
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}, 1000)
					}
				}).catch((res) => {

				})
			},
		}
	}
</script>

<style lang="scss">
	.login {
		position: relative;
		height: 100vh;
		box-sizing: border-box;
		overflow: auto;
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.Title {
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #18274A;
		position: relative;
		font-size: 56rpx;
	}

	.LoginForm {
		position: relative;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		width: 90vw;
		margin: 50rpx auto;

		.LoginForm_title {
			font-size: 28rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}

		.inputbox {
			background-color: #F8FAFB;
			border-radius: 40rpx;
			padding: 20rpx 20rpx 20rpx 40rpx;
			width: 90%;
			margin: 30rpx auto;
			justify-content: space-between;

			.green {
				font-size: 28rpx;
				color: #00CE9B;
			}

			.shu {
				width: 3rpx;
				height: 30rpx;
				background-color: #00CE9B;
			}

			.ppp {
				font-size: 28rpx;
			}
		}
	}

	.mianbtn {
		width: 90%;
		font-size: 28rpx;
		color: #fff;
		background-color: #00CE9B;
		text-align: center;
		padding: 30rpx 0;
		margin: 50rpx auto 30rpx;
		border-radius: 40rpx;
	}

	.register {
		font-size: 28rpx;
		position: relative;
		text {
			&:nth-child(1) {
				color: #B4BABE;
			}

			&:nth-child(2) {
				color: #00CE9B;
			}
		}
	}

	.bottom {
		width: 100vw;
		font-size: 28rpx;
		position: fixed;
		bottom: 100rpx;
		
		.circle {
			width: 28rpx;
			height: 28rpx;
			border: 2rpx solid #999;
			border-radius: 50%;
		}

		.green {
			color: #00CE9B;
		}
	}
</style>